// checkBox
.qf_check {
    color: var(--el-text-color-regular);
    font-weight: 400;
    font-size: var(--merak-text-size);
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    user-select: none;

    .qf_check__input {
        white-space: nowrap;
        cursor: pointer;
        outline: none;
        display: inline-flex;
        position: relative;

        .qf_check__original {
            opacity: 0;
            outline: none;
            position: absolute;
            margin: 0;
            width: 0;
            height: 0;
            z-index: -1;
        }

        .qf_check__inner {
            width: 15px;
            height: 15px;
            display: inline-block;
            position: relative;
            border: var(--el-border);
            border-radius: 2px;
            box-sizing: border-box;

            z-index: var(--el-index-normal);
            transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46), outline .25s cubic-bezier(.71, -.46, .29, 1.46);

            &::after {
                box-sizing: content-box;
                content: "";
                border: 1px solid transparent;
                border-left: 0;
                border-top: 0;
                height: 7px;
                left: 4px;
                position: absolute;
                top: 1px;
                transform: rotate(45deg) scaleY(0);
                width: 3px;
                transition: transform .15s ease-in 50ms;
                transform-origin: center;
            }
        }

        &.is-checked {
            .qf_check__inner {
                background-color: var(--el-color-primary);
                border-color: var(--el-color-primary);

                &::after {
                    transform: rotate(45deg) scaleY(1);
                    border-color: var(--el-color-white)
                }
            }
        }

        &.is-disabled {
            background-color: var(--el-disabled-bg-color);
            border-color: var(--el-border-color);
            cursor: not-allowed;

            &.is-checked {
                .qf_check__inner {
                    background-color: var(--el-border-color-extra-light);
                    border-color: var(--el-border-color);

                    &::after {
                        border-color: var(--el-text-color-placeholder);
                    }
                }

            }
        }
        .el-checkbox__input.is-indeterminate{
            & .el-checkbox__inner{
                background-color: transparent;
                &::before{
                    background-color: var(--el-checkbox-checked-bg-color);
                }
            }
        }
        &.is-indeterminate {
           
            .qf_check__inner{
                background-color: transparent;
                border-color: var(--el-color-primary);
                &::before {
                    box-sizing: border-box;
                    content: "";
                    position: absolute;
                    display: block;
                    background-color: var(--el-color-primary);
                    height: 2px;
                    transform: scale(.5);
                    left: 0;
                    right: 0;
                    top: 5px;
                }
                 
            }
     
        }
    }
}